<template>
  <view class="page">
    <view class="header">
      <view class="align-center" v-if="user_info">
        <image class="image_3" :src="user_info.avatar" />

        <view class="flex-col">
          <view class="name">
            {{ user_info.nickname }}
          </view>
          <view class="flex-row">
            <view class="grayT">
              <text class="num">{{ info.atten_count }}</text>
              关注
            </view>
            <view class="grayT">
              <text class="num">{{ info.fans_count }}</text>
              粉丝
            </view>
          </view>
        </view>
        <view class="btn1" v-if="info.isAtten == 1" @click="attention(user_info.id)"> 关注 </view>
        <view class="btn2" v-if="info.isAtten == 2" @click="unfollow(user_info.id)"> 已关注 </view>
      </view>
    </view>
    <!-- <view class="whiteRadiu"> </view> -->
    <view class="box">
      <view class="align-center justify-between navBox">
        <view class="nav">
          <view class="nav-item" :class="{ navAct: navIndex == 0 }" @click="navIndex = 0">
            动态{{ article_list.length || 0 }}
            <image src="../../static/img/dot.png" class="navLine" v-if="navIndex == 0"></image>
          </view>
          <view class="nav-item" :class="{ navAct: navIndex == 1 }" @click="navIndex = 1">
            评价{{ comment_list.length || 0 }}
            <image class="navLine" src="../../static/img/dot.png" v-if="navIndex == 1"></image>
          </view>
        </view>

        <view>
          <uni-easyinput class="ipt" prefixIcon="search" v-model="content" @confirm="searchData()" placeholder="搜索" @iconClick="searchData()"> </uni-easyinput>
        </view>
      </view>

      <goodItem :list="article_list" v-if="navIndex == 0" />
      <view v-if="article_list.length == 0 && navIndex == 0" class="noneData"></view>

      <!-- @click="$to('/pages/evaluationDetails/index?id=' + item.id)" -->
      <view class="commentlist" v-if="navIndex == 1">
        <view class="commentItem" v-for="(item, index) in comment_list" :key="index">
          <view class="align-center">
            <image class="image_4" :src="item.avatar" mode="aspectFit" />
            <view class="nickname">{{ item.nickname }}</view>
            <view class="buyname">{{ item.ttp }}</view>
          </view>

          <view class="commentContent">{{ item.content }}</view>
          <view class="commentTime"
            >{{ item.create_at }} <text style="margin-left: 20px">{{ item.areaname }}</text></view
          >
        </view>
      </view>
      <view v-if="comment_list.length == 0 && navIndex == 1" class="noneData"></view>
    </view>
  </view>
</template>
<script>
import goodItem from '@/components/goodItem'

export default {
  components: {
    goodItem
  },
  data() {
    return {
      info: {},
      article_list: [],
      comment_list: [],
      user_info: {},
      navIndex: 0,
      content: '',
      page: 1,
      total: 0
    }
  },
  onReachBottom(e) {
    console.log(123)
    if (this.article_list.length < this.total) {
      this.page++
      this.getActList(true)
    }
  },
  onLoad(opt) {
    this.user_id = opt.id
    this.init()
    this.getActList()
    this.getComment()
  },
  methods: {
    searchData() {
      if (this.navIndex == 0) {
        this.getActList()
      } else {
        this.getComment()
      }
    },
    getActList(type) {
      if (!type) {
        this.article_list = []
      }
      this.$http({ url: 'getArticleList2 ', data: { user_id: this.user_id, content: this.content } }).then(res => {
        this.article_list.push(...res.data.data)
        this.total = res.data.total
      })
    },
    getComment() {
      this.$http({ url: 'getComment2 ', data: { user_id: this.user_id, content: this.content } }).then(res => {
        this.comment_list = res.data.data
      })
    },

    init() {
      this.$http({ url: 'getUserDetail', data: { user_id: this.user_id } }).then(res => {
        this.info = res.data

        this.$http({ url: 'getUserInfoById', data: { user_id: this.user_id } }).then(res => {
          this.user_info = res.data
        })
      })
    },
    attention(id) {
      this.$http({
        url: 'attention',
        data: { b_user_id: id },
        method: 'GET'
      }).then(() => {
        this.init()
      })
    },
    unfollow(id) {
      this.$http({
        url: 'attention2',
        data: { b_user_id: id },
        method: 'GET'
      }).then(() => {
        this.init()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.ipt {
  ::v-deep .uni-easyinput__content {
    border-radius: 20px;
  }
}
.whiteRadiu {
  width: 100%;
  border-radius: 18px 18px 0px 0px;
  padding: 0 2.5%;
  box-sizing: border-box;
  padding-top: 20px;
  background: #fff;
  overflow-y: scroll;
  height: 20px;
  position: fixed;
  top: 200px;
  left: 0;
}

.buyname {
  background: #fff0e8;
  border-radius: 2px;

  font-weight: 400;
  font-size: 10px;
  color: #ed6114;
  line-height: 14px;
  text-align: center;
  padding: 2px 5px;
}
.nickname {
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  line-height: 20px;
  margin-right: 20px;
}
.commentItem {
  width: 95%;
  margin: 10px auto;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
@import '../common/common.css';
.commentlist {
  background: #fff;
}
.image_4 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 15px;
}
.commentTime {
  font-weight: 400;
  font-size: 11px;
  color: #a8a8a8;
}
.commentContent {
  height: 18px;
  font-weight: 400;
  font-size: 13px;
  color: #333333;
  line-height: 18px;
  margin: 10px 0;
}

.page {
  width: 100%;
  overflow: hidden;
  padding-bottom: 30px;
  min-height: 99vh;
  overflow-y: scroll;
}
.navBox {
  background: #fff;
  padding: 0 2.5%;
  width: 100%;
  height: 65px;
}
.nav {
  display: flex;
  align-items: flex-end;
}
.nav-item {
  position: relative;
  font-size: 14px;
  color: #999999;
  margin-right: 20px;
  z-index: 2;
}
.commnetlist {
  width: 100%;
}
.navLine {
  position: absolute;
  display: block;
  width: 26px;
  height: 6px;
  bottom: 1px;
  z-index: -1;
}
.navAct {
  font-weight: 600;
  font-size: 18px;
  color: #111111;
}

.giveImg {
  width: 18px;
  height: 16px;
  display: block;
  margin-right: 5px;
}
.giveNum {
  font-size: 12px;
  color: #999999;
}

.nickname {
  font-size: 12px;
  color: #282828;
}
.actUser {
  box-sizing: border-box;
  padding: 0 5%;
  width: 100%;
}
.box {
  width: 100%;
  // padding: 0 2.5%;
  box-sizing: border-box;
  height: auto;
  border-radius: 50px;
}

.header {
  background-image: url('../../static/comunityUser/bac.png');
  background-size: 100% 100%;
  width: 100%;
  height: 175apx;
  box-sizing: border-box;
  padding: 10% 5%;
}

.image_3 {
  width: 60px;
  height: 60px;
  border: 2px solid #ffffff;
  display: block;
  border-radius: 50%;
  margin-right: 15px;
}
.name {
  font-weight: 500;
  font-size: 18px;
  color: #333333;
  line-height: 25px;
}
.grayT {
  font-weight: 400;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.29);
  margin-right: 15px;
}
.num {
  font-weight: 600;
  margin-right: 5px;
  font-size: 18px;
  color: #333333;
}
.btn1 {
  width: 60px;
  height: 30px;
  background: linear-gradient(331deg, #fe373c 0%, #fe7837 100%);
  box-shadow: 0px 2px 6px 0px rgba(255, 136, 139, 0.5);
  border-radius: 15px;

  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  line-height: 30px;
  text-align: center;
  margin-left: 50px;
}
.btn2 {
  width: 60px;
  height: 30px;
  background: #f8f8f8;
  border-radius: 15px;

  font-weight: 500;
  font-size: 14px;
  color: #999999;
  line-height: 30px;
  text-align: center;
  margin-left: 50px;
}
</style>
